<template>
  <div class="fenlei">
    <span class="spa">
      <span @click="btn()"> 返回</span>
      <input type="text" v-model="del" />
      <button @click="add()">搜索</button>
    </span>
    <hr />
    <br />
    <h5>{{ del }}</h5>
    <h4>
      热门搜索:
    </h4>
    <div v-for="item in products" :key="item._id">
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

<script>
import { reqProductsAPI } from "../api/porduct";
export default {
  components: {},
  data() {
    return {
      del: "",
      products: [],
      page: 1,
    };
  },
  computed: {},
  watch: {},

  methods: {
    btn() {
      this.$router.push(`/Home`);
    },

    // 获取信息
    async getProducts() {
      this.loading = true;
      var result = await reqProductsAPI();
      this.loading = false;
      this.products = [...result.products];
    },

    // 搜索
    add() {
      console.log();
    },
  },
  created() {
    this.getProducts();
  },
  mounted() {},
};
</script>
<style scoped>
.spa {
  width: 100vw;
  height: 50px;
  display: block;
  text-align: center;
  margin-top: 10px;
  font-weight: 500;
}
input {
  width: 273px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #cacaca;
}
button {
  height: 30px;
  background: red;
  color: #fff;
  border-radius: 5px;
}
</style>
